<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/24
  Time: 14:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    导入easyui样式-->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!--    导入easyui相关的js库-->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <script src="../layer/layer/layer.js"></script>
    <link rel="stylesheet"
          href="http://localhost:63342/threePeopleWalk1/web/layer/layer/theme/default/layer.css?v=3.1.1"
          id="layuicss-layer">
    <!--导入layui-->
    <link rel="stylesheet" href="../layui/layui/css/layui.css">
    <script src="../layui/layui/layui.js" charset="utf-8"></script>
    <style>
        * {
            position: relative;
        }
        /*使得选项和答案可以滚动而不出现滚动条*/
        ::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
    </style>
    <script type="text/javascript">


        $(function () {

            //目前只做测试，是通过点击选择不同的值
            /*$("#ForeSubject").click(function(){
                alert($("input[name='option']:checked").val())
            });*/
            //调用加载第一个题目时的选项滚动效果
            optionRoll();
            //选项滚动函数
            function optionRoll(){
                $("#divs").animate({left:"300px"},1,function(){
                    $("#divs").animate({left:"0"},700);
                });
            }
            //设置一个绑定事件变量
            var eventList;
            //定义一个显示当前位置的变量
            var nowNum=0;
            //定义一个保存所选值的数组,答案集
            var arr=new Array();
            //调用显示题目函数，也就是刚加载时要显示题目
            showSubject(nowNum);
            //点击下一题
            $("#BackSubject").click(function(){
                //判断和保存用户选择答案状态的函数
                saveAnswer(nowNum);
                if (nowNum<49){
                    //题目位置+1
                    nowNum+=1;
                    //调用显示题目代码，
                    saveSub(nowNum);
                    //改变答题卡颜色
                    SubCardColor(nowNum);
                    //判断当前页面是否已经选择
                    /*if (arr[nowNum]!=undefined){//判断不为nudefined则为有值
                        alert(arr[nowNum]);
                    }*/
                    //还原选项和题目的字体大小
                    $("#option").animate({fontSize:"21px"});
                    $("#stem").animate({fontSize:"23px"});
                    //调用选项滚动函数
                    optionRoll();

                }else{
                    //显示颜色，不消退颜色
                    SubCardColor(49);
                    layer.msg("已经到达最后一题");
                }

            });
            $("#ForeSubject").click(function(){//判断点击的为上一题
                //判断和保存用户选择答案状态的函数
                saveAnswer(nowNum);
                if (nowNum>0){
                    //题目位置-1
                    nowNum-=1;
                    //调用显示题目代码，
                    saveSub(nowNum);
                    //改变答题卡颜色
                    SubCardColor(nowNum);
                    /*//判断当前页面是否已经选择----该代码不应该放在此处，因为showSubject是回调会产生异步，到时上一页还
                    没有显示出来就运行如下代码，那么修改的attr属性是当前页面的。
                    if (arr[nowNum]!=undefined){//判断不为nudefined则为有值

                        alert(arr[nowNum]);
                        alert(arr[nowNum].substring(0,1));
                        $("input[value='"+arr[nowNum].substring(0,1)+"']").attr("cheked",true);
                        $("input[value='"+arr[nowNum].substring(0,1)+"']").attr("type","checkbox");
                    }*/
                    //还原选项和题目的字体大小
                    $("#option").animate({fontSize:"21px"});
                    $("#stem").animate({fontSize:"23px"});
                    //调用选项滚动函数
                    optionRoll();
                }else{
                    //显示颜色，不消退颜色
                    SubCardColor(0);
                    layer.msg("己经到达第一题");
                }
            });

            //得出每个选项字符串
            function optionHtml(data){
                //获取每个选择字符串
                var optionStr="";
                //判断单选还是多选
                if(data.subjectType=="单选"){
                    optionSet("radio");
                }else{//判断为多选题
                    optionSet("checkbox");
                };

                //选项集
                function optionSet(redChe){
                    if (data.optionA!=undefined){//判断值不为空
                        optionStr+="<input type='"+redChe+"' style='zoom: 150%;' name='option' value='A' />A、"+data.optionA+"<br/><br/>";
                    }
                    if (data.optionB!=undefined){
                        optionStr+="<input type='"+redChe+"' style='zoom: 150%;'  name='option' value='B' />B、"+data.optionB+"<br/><br/>";
                    }
                    if (data.optionC!=undefined){
                        optionStr+="<input type='"+redChe+"' style='zoom: 150%;'  name='option' value='C' />C、"+data.optionC+"<br/><br/>";
                    }
                    if (data.optionD!=undefined){
                        optionStr+="<input type='"+redChe+"' style='zoom: 150%;'  name='option' value='D' />D、"+data.optionD+"<br/><br/>";
                    }
                    if (data.optionE!=undefined){
                        optionStr+="<input type='"+redChe+"' style='zoom: 150%;'  name='option' value='E' />E、"+data.optionE+"<br/><br/>";
                    }
                    if (data.optionF!=undefined){
                        optionStr+="<input type='"+redChe+"' style='zoom: 150%;'  name='option' value='F' />F、"+data.optionF+"<br/><br/>";
                    }
                    if (data.optionG!=undefined){
                        optionStr+="<input type='"+redChe+"' style='zoom: 150%;'  name='option' value='G' />G、"+data.optionG+"<br/><br/>";
                    }
                    if (data.optionH!=undefined){
                        optionStr+="<input type='"+redChe+"' style='zoom: 150%;'  name='option' value='H' />H、"+data.optionH+"<br/><br/>";
                    }
                }
                return optionStr;
            }
            //定义变量用来保存学员考试状态编号
            var conditionId;
            //创建一个保存结果的数组
            var correctArr=new Array();
            //获取结束时间
            var timeFinish;
            //定义一个保存题目的变量
            var datas;
            //显示题目
            function showSubject(count){
                //获取题目的阿贾克斯
                $.ajax({
                    url:"../ExamsPageServlet",
                    type:"POST",
                    dataType:"json",
                    data:"method=showExamsSubject",
                    success:function(data){
                        //将题目保存到data中
                        datas=data;
                        //接收结束时间
                        timeFinish=datas.finishTime;
                        //接收来自服务器端考试状态编号
                        conditionId=datas.conditionId;
                        //调用显示时间函数
                        lookTime();
                        //调用保存题目的函数
                        saveSub(count);
                        //通过循环保存每题答案
                        for (var i=0;i<50;i++){
                            correctArr[i]=datas.data[i].correct;
                        }
                    }
                });
            }

            //保存所有题目的函数
            function saveSub(count){
                //显示题目
                $("#stem").html(datas.data[count].stem);
                //调用函数获取每个选项字符串
                var str=optionHtml(datas.data[count]);
                //显示选项
                $("#option").html(str);
                //判断当前页面是否已经选择
                if (arr[nowNum]!=undefined){//判断不为nudefined则为有值
                    //拿出选项
                    var option=(arr[nowNum].split(","))[0];
                    for (var i = 0; i < option.length; i++) {
                        $("input[value='"+option.charAt(i)+"']").prop("checked",true);
                        //该注释字段和上面方法做对比，本字段为jQeury选中静态选项，而上面字段为动态选中选项
                        /*$("input[value='"+arr[nowNum].substring(0,1)+"']").attr("type","checkbox");*/
                    }
                }
                //显示题型及选项
                $("#SubTypeAndCount").text(datas.data[count].subjectType+"题/第"+(count+1)+"题");
            }

            //调用改变颜色函数
            SubCardColor(0);
            //答题卡颜色显示
            function SubCardColor(num){
                num=num+1;
                $("div[name='"+num+"']").css({"background":"green","color":"white"});
            }

            //调用答题卡事件函数
            event();
            //答题卡事件函数和光标样式
            function event(){
                //循环答题卡上每个选项
                for (var i=1;i<=50;i++){
                    //设置光标悬浮到选项上的样式
                    $("div[name='"+i+"']").hover(
                        function() {
                            this.style.cursor = 'pointer';
                        }
                    );
                    //为答题卡选项绑定事件
                    $("div[name='"+i+"']").click(function(){
                        var vul=window.parseInt($(this).text().replace(/[\r+\s+]/g, ""));
                        //判断和保存用户选择答案状态的函数
                        saveAnswer(nowNum);
                        //更改选项位置
                        nowNum=vul-1;
                        //调用显示题目代码，
                        saveSub(nowNum);
                        //改变答题卡颜色
                        SubCardColor(nowNum);
                        //还原选项和题目的字体大小
                        $("#option").animate({fontSize:"21px"});
                        $("#stem").animate({fontSize:"23px"});
                        //调用选项滚动函数
                        optionRoll();
                    });
                }
            }

            //判断和保存用户选择答案状态的函数
            function saveAnswer(nowNum){
                //获得选中元素
                var checkeds=$("input[name='option']:checked");
                //取得本页选择项保存到数组当中
                if(checkeds.val()!=undefined){
                    var str="";
                    checkeds.each(function(){
                        str=str+$(this).val();
                    });
                    arr[nowNum]=str+","+nowNum;
                    //选中后更改颜色
                    finishSubCardColor(nowNum);
                }else{//如果没有取得本题选项说明没有选择，则更改颜色
                    //如果没有选择，赋未定义，或者取消复选框选择，让原来的值为未定义
                    arr[nowNum]=undefined;
                    //改变答题卡颜色
                    nullSubCardColor(nowNum);
                }
            }

            //取消答题卡颜色函数
            function nullSubCardColor(num){
                num=num+1;
                $("div[name='"+num+"']").css({"background":"white","color":"black"});
            }

            //更改选中答案后的颜色
            function finishSubCardColor(num){
                num=num+1;
                $("div[name='"+num+"']").css({"background":"orange","color":"white"});
            }

            //显示时间和隐藏时间的动画效果
            $("#hiddenTime").click(function () {
                $("#time").slideToggle("slow");
                if ($("#hiddenTime").text()=="隐藏"){
                    $("#hiddenTime").text("显示");
                    $("#hiddenTime").attr("class","layui-btn layui-btn-normal");
                }else{
                    $("#hiddenTime").text("隐藏");
                    $("#hiddenTime").attr("class","layui-btn");
                }
            });
            //用于选项放大定义变量
            var maxPtion=1;
            //点击放大选项事件
            $("#MaxOption").click(function(){
                if (maxPtion==1){
                    $("#option").animate({fontSize:"3em"});
                    maxPtion=0;
                }else{
                    $("#option").animate({fontSize:"21px"});
                    maxPtion=1;
                }
            });

            //用于题目放大定义变量
            var MaxObj=1;
            //点击放大题目事件
            $("#MaxObj").click(function(){
                if (MaxObj==1){
                    $("#stem").animate({fontSize:"3em"});
                    MaxObj=0;
                }else{
                    $("#stem").animate({fontSize:"23px"});
                    MaxObj=1;
                }
            });

            //点击提交按钮
            $("#submit").click(function(){
                //调用保存选项答案的函数保存当前页面答案
                saveAnswer(nowNum);
                //判断当前题目是否已经选择答案
                if (arr[nowNum]==undefined){
                    //示范一个公告层
                    layer.confirm("题目尚未答完，确认交卷吗？", {icon: 5, title: "提示"}, function (index) {
                        overPaper();
                    });
                }else{
                    var boo=true;
                    //遍历答案集
                    $.each(arr,function(index,item){
                        //判断50道题是否每道题都有答案
                        if (item==undefined){
                            boo=false;
                        }
                    });
                    if (boo){
                        //答题卡已全选，可以调用自动阅卷
                        overPaper();
                    }else{
                        //示范一个公告层
                        layer.confirm("题目尚未答完，确认交卷吗？", {icon: 5, title: "提示"}, function (index) {
                            overPaper();
                        });
                    }
                }
            });
            var eventBoo=true;

            //自动阅卷函数
            function overPaper(){
                //让事件中的函数不可用
                eventBoo=false;
                //定义一个保存学员答题正确的题目编号
                var correctId="";
                //定义一个保存分数的变量
                var score=0;
                $.each(correctArr,function(index,item){
                    //判断遍历的是单选还是多选
                    if (item.length==1 && arr[index]!=undefined){//判断为单选，判断一致则加两分
                        if (item==arr[index].split(',')[0]){//判断一致
                            //分数加2
                            score+=2;
                            //添加正确答案编号
                            correctId+=datas.data[index].subjectId+",";
                        }
                    }else if (arr[index]!=undefined){//判断为多选
                        //取到用户的选项答案
                        var str=arr[index].split(',')[0];
                        for (var l=0;l<item.length;l++){
                            for (var a=0;a<str.length;a++){
                                //判断用户答案中的一个是否和正确答案中的一个相同
                                if (str.charAt(a)==item.charAt(l)){
                                    //删除学员答案中一个和正确答案相同的答案,将正确答案也删除
                                    str=str.replace(str.charAt(a)," ");
                                    item=item.replace(item.charAt(l)," ");
                                }
                            }
                        }
                        //去除答案和正确答案的空格
                        str=str.replace(/[\r+\s+]/g, "");
                        item=item.replace(/[\r+\s+]/g, "");
                        //判断学员的答案和正确答案是否完全一致
                        if (str.length!=0){//不一致，得0分

                        }else{//可能发生一致一致
                            if (item.length!=0){//部分一致，得1分
                                score+=1;
                            }else{//完全一致，得两分
                                score+=2;
                                //添加正确答案编号
                                correctId+=datas.data[index].subjectId+",";
                            }
                        }
                    }
                });
                $.ajaxSettings.async = false;
                //添加成绩信息
                $.post("../ExamsPageServlet","method=addScore&conditionId="+conditionId+"&score="+score,function(date){
                    //判断是否添加补考信息
                    if(score<60){
                        //添加该学员的补考信息
                        $.post("../ExamsPageServlet","method=addReexams&conditionId="+conditionId,function(data){
                            //添加试题难易信息
                            $.post("../ExamsPageServlet","method=addSubAnalysis&conditionId="+conditionId+"&correctId="+correctId,function(datas){
                                //删除学员的考试状态，在查询成绩后删除学员状态，因为查询成绩需要用到学员状态
                                $.post("../ExamsPageServlet","method=deleteState&conditionId="+conditionId,function(datass){});
                            });
                        });
                    }else{
                        //添加试题难易信息
                        $.post("../ExamsPageServlet","method=addSubAnalysis&conditionId="+conditionId+"&correctId="+correctId,function(data){
                            //删除学员的考试状态，在查询成绩后删除学员状态，因为查询成绩需要用到学员状态
                            $.post("../ExamsPageServlet","method=deleteState&conditionId="+conditionId,function(data){});
                        })
                    }
                    window.location.href="StudentHome.jsp";
                });
                $.ajaxSettings.async = true;
            }

            //检查舞弊函数
            document.addEventListener('visibilitychange',myFunction,false);

            function myFunction() {
                if (eventBoo){
                    // 用户离开了当前页面
                    if (document.visibilityState === 'hidden') {
                        document.title = '舞弊';
                    }

                    // 用户打开或回到页面
                    if (document.visibilityState === 'visible') {
                        document.title = '你已舞弊';
                        alert("你已舞弊，根据考试规则将做0分处理");
                        //添加成绩信息
                        $.post("../ExamsPageServlet","method=addScore&conditionId="+conditionId+"&score=0",function(date){
                            //判断是否添加补考信息
                            if(true){
                                //添加该学员的补考信息
                                $.post("../ExamsPageServlet","method=addReexams&conditionId="+conditionId,function(data){
                                    //添加试题难易信息
                                    //$.post("../ExamsPageServlet","method=addSubAnalysis&conditionId="+conditionId+"&correctId="+correctId,function(data){
                                    //删除学员的考试状态，在查询成绩后删除学员状态，因为查询成绩需要用到学员状态
                                    $.post("../ExamsPageServlet","method=deleteState&conditionId="+conditionId,function(data){});
                                    //})
                                });
                            }else{
                                //添加试题难易信息
                                //$.post("../ExamsPageServlet","method=addSubAnalysis&conditionId="+conditionId+"&correctId="+correctId,function(data){
                                //删除学员的考试状态，在查询成绩后删除学员状态，因为查询成绩需要用到学员状态
                                $.post("../ExamsPageServlet","method=deleteState&conditionId="+conditionId,function(data){});
                                //})
                            }
                            window.location.href="StudentHome.jsp";
                        });
                    }
                }
            }


            //调用显示时间函数
            function lookTime(){
                //获取当前时间函数
                function getNowTime(){
                    var myDate = new Date();
                    var h=myDate.getHours();              //获取当前小时数(0-23)
                    var m=myDate.getMinutes();          //获取当前分钟数(0-59)
                    return h+":"+m;
                }
                //调用时间函数，第一个参数为当前时间，第二个参数为考试结束时间
                var times=splitTime(getNowTime(),timeFinish.substring(0,timeFinish.length-3));
                function splitTime(a,b){
                    var str=a;
                    var arr=new Array();
                    //可以用字符或字符串分割
                    arr=str.split(':');
                    //拿到第一个时间分数
                    var total=parseInt(arr[0])*60+parseInt(arr[1]);

                    var strs=b;
                    var arrs=new Array();
                    //可以用字符或字符串分割
                    arrs=strs.split(':');
                    //拿到第一个时间分数
                    var totals=parseInt(arrs[0])*60+parseInt(arrs[1]);
                    //返回时间分钟
                    return totals-total;
                }

                //2、开始修改里面的内容
                var hour=parseInt(times/60);
                var minutes=(times%60);
                var seconds=0;
                if(hour!=0 && minutes==0 && seconds==0){
                    hour-=1;
                    minutes=59;
                    seconds=60;
                }
                var start=false;//作用就是为了记录是否已经到了最后一分钟
                //1、创建定时器每秒改变指定标签的内容
                var time=setInterval(update,1000);
                function update(){
                    $("#time").text("剩余时间："+hour+":"+minutes+":"+seconds);
                    seconds--;
                    //判断一分是否结束
                    if(seconds<0){
                        //判断是已经进入最后一次计时
                        if(start==true){
                            $("#time").text("倒计时结束：00:00:00");
                            clearInterval(time);
                            //调用自动阅卷函数
                            overPaper();
                        }
                        seconds=60;//重新开始计时下一分钟
                        //分钟数则减一
                        minutes--;
                        //判断小时是否已经全部结束
                        if(hour==0 && minutes==0){
                            start=true;
                        }
                        //判断分钟数是否结束
                        if(minutes<0){
                            //让小时数减一
                            if(hour>0){
                                hour--;
                            }
                            //让分钟数为60
                            minutes=60;
                        }
                    }
                }
            }
        });

        /*function checkLeave(){
            event.returnValue="确定离开当前页面吗？";
        }*/

    </script>
</head>
<body  <%--onbeforeunload="checkLeave()"--%>oncopy="alert('你正在进行有舞弊行为，请立即停止，否则将按舞弊处理');return false;">
<div style="width: 100%;height: 720px;">
    <div style="float: left;width: 65%;height: 100%;left: 5%;">
        <!--显示题目数层-->
        <div style="width: 100%;height: 10%;border-bottom: 1px solid gray;">
            <span style="font-size: 32px;top: 20%;" id="SubTypeAndCount">单选题/第1题</span>
            <!--显示时间层-->
            <div style="top: 30%;float: right;right: 12%;font-size: 28px;color: #3e8f3e;" id="time">

                <%--<span style="font-size: 28px;">剩余时间</span>
                <span style="font-size: 25px;color: #3e8f3e;">2:00</span>--%>
            </div>
            <!--显示隐藏时间按钮-->
            <button style="left: 74%;font-size: 20px;top: 20%;" class="layui-btn" id="hiddenTime" >隐藏</button>
        </div>
        <!--题目层-->
        <div style="width: 100%;height: 14%;top: 5%;overflow: auto;scrollbar-width: none;">
                <span style="font-size: 23px;"id="stem">

                </span>
        </div>
        <!--选项层-->
        <div style="width: 100%;height: 55%;top: 8%;border-bottom: 1px solid gray;">
            <div style="width: 80%;height: 90%;top: 10%;overflow: auto;scrollbar-width: none;position: relative;left: 20%;" id="divs">
                    <span style="font-size: 21px;"id="option">

                    </span>
            </div>
        </div>

        <!--换题按钮层-->
        <div style="width: 100%;height:10%;top: 10%;">
            <div style="width: 10%;height: 50%;left: 30%;top: 30%;border-radius: 10%;">
                <button style="width: 100%;height: 100%;border-radius: 10%;" class="layui-btn" id="ForeSubject">上一题</button>
            </div>
            <div style="width: 10%;height: 50%;float: right;bottom: 20%;right: 40%;border-radius: 10%;">
                <button style="width: 100%;height: 100%;border-radius: 10%;" class="layui-btn" id="BackSubject">下一题</button>
            </div>
            <div style="width: 5%;height: 50%;float: right;bottom: 20%;right: 12%;border-radius: 10%;">
                <button style="width: 100%;height: 100%;border-radius: 10%;" class="layui-btn layui-icon layui-icon-search layui-bg-gray" id="MaxOption">项</button>
            </div>
            <div style="width: 5%;height: 50%;float: right;bottom: 20%;border-radius: 10%;">
                <button style="width: 100%;height: 100%;border-radius: 10%;" class="layui-btn layui-icon layui-icon-search layui-bg-gray" id="MaxObj">题</button>
            </div>
        </div>

    </div>
    <div style="float: right;width: 30%;height: 100%;">
        <div style="width: 150px;height: 50px;float: right;right: 30%;top: 3%;">
            <span style="font-size: 32px;font-family: '楷体';">答题卡</span>
        </div>

        <!--答题卡层-->
        <div style="width: 80%;height: 77%;border: 1px solid #3c8b3c;margin-top: 18%;left: 10%;">
            <table style="left: 5%;top: 2%;">
                <tbody>
                <tr>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="1">
                            1
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="2">
                            2
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="3">
                            3
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="4">
                            4
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="5">
                            5
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="6">
                            6
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="7">
                            7
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="8">
                            8
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="9">
                            9
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="10">
                            10
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="11">
                            11
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="12">
                            12
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="13">
                            13
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="14">
                            14
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="15">
                            15
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="16">
                            16
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="17">
                            17
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="18">
                            18
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="19">
                            19
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="20">
                            20
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="21">
                            21
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="22">
                            22
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="23">
                            23
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="24">
                            24
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="25">
                            25
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="26">
                            26
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="27">
                            27
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="28">
                            28
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="29">
                            29
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="30">
                            30
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="31">
                            31
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="32">
                            32
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="33">
                            33
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="34">
                            34
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="35">
                            35
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="36">
                            36
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="37">
                            37
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="38">
                            38
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="39">
                            39
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="40">
                            40
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="41">
                            41
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="42">
                            42
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="43">
                            43
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="44">
                            44
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="45">
                            45
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="46">
                            46
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="47">
                            47
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="48">
                            48
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="49">
                            49
                        </div>
                    </td>
                    <td>
                        <div style="width: 45px;height: 35px;margin-left: 20px;margin-top: 12px;border-radius: 10px;text-align: center;line-height: 30px;border: 2px solid gray " name="50">
                            50
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!--提交按钮-->
    <div style="width: 200px;height: 40px;float: right;right: 8%;bottom:8%;">
        <button class="layui-btn layui-btn-warm" style="width: 100%;height: 100%;" id="submit">交卷</button>
    </div>
</div>

</body>
</html>
